import React, { useState,useEffect } from 'react'
import "./login.scss"
import ToLogin from './toLogin'
import IdFind from './idFind'
import PassFind from './passFind'
import {useSelector} from 'react-redux';

export default function Login() {
    const languages = useSelector((state) =>state).publicReducer.language
    const [toLogin, setToLogin] = useState(true)
    const [idFind, setIdFind] = useState(true)
    const [header, setHeader] = useState("로그인")
    useEffect(()=>{
        if(languages==="Korean"){setHeader("로그인")}
        if(languages==="Chinese"){setHeader("登录")}
        if(languages==="English"){setHeader("sign up")}
    },[])

    const to_idFind = ()=>{
        setToLogin(false)
        if(languages==="Korean"){setHeader("ID 찾기")}
        if(languages==="Chinese"){setHeader("ID查找")}
        if(languages==="English"){setHeader("find ID")}
    }
    const to_passFind =()=>{
        setToLogin(false)
        setIdFind(false)
        if(languages==="Korean"){setHeader("비밀번호 찾기")}
        if(languages==="Chinese"){setHeader("密码查找")}
        if(languages==="English"){setHeader("find PASSWORD")}
    }
    const to_login = ()=>{
        setToLogin(true)
        setIdFind(true)
        if(languages==="Korean"){setHeader("로그인")}
        if(languages==="Chinese"){setHeader("登录")}
        if(languages==="English"){setHeader("sign up")}
    }
    return (
        <div className='login'>
            <div className='img'>
                
            </div>
            <div className='mains'>
                <img src={require("../../utils/logo/login.png")} alt='' />
                <header>{header}</header>
                {
                    toLogin ? <ToLogin /> : (idFind ? <IdFind to_passFind={to_passFind} /> : <PassFind to_login={to_login} />)
                }
                <footer>
                    {toLogin ?
                        <><b onClick={to_idFind}>ID</b>
                            {languages==='Korean'?'또는':languages==="English"?'perhaps':'或者'}
                        <b onClick={to_passFind}>Password</b>
                        {languages==='Korean'?'찾기':languages==="English"?'lookup':'查找'}</>
                        : <b onClick={to_login}>login</b>}
                </footer>
            </div>
        </div>
    )
}
